<template>
	<view class="wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType" label-width="150" >
			<u-form-item label-position="left" label="姓名" >
				<text>{{join(selNameList)}}</text>
				<view slot="right">
					<u-button v-if="typeName=='加班'"  type="primary" size="mini" @click="selectPerson(1)">选择</u-button>
				</view>
				<!-- <u-input :border="true" placeholder="输入姓名" v-model="model.empName" ></u-input> -->
				<!-- <combox :candidates="dataSource" @select='selectPerson()' :label="'username'" placeholder="请输入姓名" v-model="model.empName"></combox> -->
			</u-form-item>
			<u-form-item label-position="left" label="类型">
				<u-radio-group v-model="model.addType" @change="changeType">
					<u-radio name="1" >加班</u-radio>
					<u-radio name="0" >调休</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label-position="left" :label="typeName+'日期'" prop="workTime" >
				<u-input type="select" :select-open="pickerShow" v-model="model.workTime" :placeholder="'请选择'+typeName+'日期'" @click="pickerShow = true"></u-input>
				<!-- <u-picker mode="time" v-model="pickerShow" :params="params" @confirm="regionConfirm"></u-picker> -->
				
				<u-calendar max-date="2050-01-01" v-model="pickerShow" ref="calendar" @change="regionConfirm" mode="range">
				</u-calendar>
			</u-form-item>
			<u-form-item label-position="left" :label="typeName+'时长'" prop="workDays" >
				<u-input :border="true" :placeholder="'单次'+typeName+'时长'" v-model="model.workDays" type="number"></u-input>
			</u-form-item>
			<u-form-item label-position="left" label="备注" prop="reason" >
				<u-input type="textarea" :border="true" :placeholder="typeName+'原因'" v-model="model.reason" />
			</u-form-item>
		</u-form>

		<u-button :loading="loading" @click="submit" size="default" type="primary" :ripple="true">提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			return {
				pickerShow:false,
				loading:false,
				// params: {
				// 	year: true,
				// 	month: true,
				// 	day: true,
				// 	hour: false,
				// 	minute: false,
				// 	second: false
				// },
				model: {
					// empId:'',
					// empName:'',
					workDays:'',
					workTime:'',
					addType:'1',
					reason:''
				},
				rules: {
					empName: [
						{
							required: true,
							message: '请输入姓名',
							trigger: ['change','blur'],
						},
					],
					addType: [
						{
							required: true,
							message: '请选择类型',
							trigger: ['change','blur'],
						},
					],
					workTime: [
						{
							required: true,
							message: '请选择日期',
							trigger: ['change','blur'],
						},
					],
					workDays: [
						{
							required: true,
							message: '请输入时长',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								//由于最小单位是0.5 所以通过校验value*2是否为整数 
								return this.$u.test.digits(value * 2)
							},
							message: '请正确输入时长（最小单位0.5天）',
							trigger: ['change','blur'],
						}
					],
					reason: [
						{
							required: true,
							message: '请输入原因',
							trigger: ['change','blur'],
						}
					],
				
				},
				border: false,
				errorType: ['message'],
				dataSource: [],
				selIdList:[],
				selNameList:[],
			};
		},
		onLoad() {
			//接收 选择页面传过来的值
			uni.$on('selPersonResult',(idList,nameList,type)=>{
				if(type==0){
					this.selIdList=idList
					this.selNameList=nameList
				}
				
			})
			
			//初始化，默认选择自己
			this.$set(this.selIdList,0,uni.getStorageSync('uid'))
			this.$set(this.selNameList,0,uni.getStorageSync('username'))

		},
		computed: {
			typeName(){
				return this.model.addType==0 ? '调休' : '加班';
			},
			borderCurrent() {
				return this.border ? 0 : 1;
			},
			join() {
				return function(item) {
					return item.join(',')
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},

		methods: {
			changeType(e){
				//调休 type为0 时，只能选自己
				if(e==0){
					this.selIdList=[uni.getStorageSync('uid')]
					this.selNameList=[uni.getStorageSync('username')]
				}
				
				uni.setNavigationBarTitle({
				    title: this.typeName+'录入'
				});
			},
			selectPerson(type){
				uni.navigateTo({
					url:'./selPerson?selIdList='+JSON.stringify(this.selIdList)+'&type='+type,
				})
			},
			submit() {
				let that = this
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let params=[]
						that.selIdList.forEach((ele,index)=>{
							params.push({empId:ele,...that.model})
						})
						console.log(params)
						that.loading = true
						this.request('business/work/add', params).then(res => {
							if(res.code==0){
								uni.showModal({
									showCancel: false,
									content: '录入成功',
									success: function(res) {
										if (res.confirm) {
											uni.switchTab({
												url:'./otList',
												fail(e) {
													console.log(e);
												}
											})
										} 
									}
								})
						
							}else{
								uni.showModal({
									showCancel: false,
									content: res.msg
								})
							}
							that.loading = false
						})
					} 
				});
			},
			regionConfirm(e) {
				this.model.workTimeStart = e.startDate
				this.model.workTimeEnd = e.endDate 
				this.model.workTime = this.model.workTimeStart + '至'+this.model.workTimeEnd
				// this.model.workTime = e.year + '-' + e.month + '-' + e.day;
			},

		}
	};
</script>

<style scoped lang="scss">
.wrap {
	padding: 30rpx;
}
.alternative {
	color: $u-tips-color;
	display: flex;
	justify-content: space-between;
	margin-top: 30rpx;
	margin-bottom: 30rpx;
}
.agreement {
	display: flex;
	align-items: center;
	margin: 40rpx 0;

	.agreement-text {
		padding-left: 8rpx;
		color: $u-tips-color;
	}
}
</style>
